<template>
  <div id="huangbar">
    <div class="huangbar-wrap">
      <div class="cart">
        <div class="icons avatar cursor" v-if="userInfo" @click="routeToPath('/member/main','mall')">
          <img class="circle" :src="URL.PIC+userInfo.avatar">
        </div>
        <div class="icons icons-user cursor" v-else @click="routeToPath('/login?redirect=/member/main','mall')"></div>
        <div class="cart-main cursor" @click="routeToPath(userInfo?'/cart/list':'/login?redirect=/cart/list','mall')">
          <span class="icons icons-cart"></span>
          <span class="text">购<br>物<br>车</span>
        </div>
        <div class="cart-number cursor" @click="routeToPath(userInfo?'/cart/list':'/login?redirect=/cart/list','mall')" v-if="userInfo">
          {{ cartNumber }}
        </div>
      </div>
      <ul class="navs">
        <li @mouseover="showQrcodeApp = true" @mouseout="showQrcodeApp = false">
          <span class="icons icons-apps"></span>
          <span class="text">APP</span>
          <span class="qrcode-show app-show" v-show="showQrcodeApp">
            <img src="@/assets/images/layouts/huangbar/apps.png">
            <span class="pop-text">微信扫一扫下载</br>一呼百应APP</span>
          </span>
        </li>
        <li @mouseover="showQrcodeXcx = true" @mouseout="showQrcodeXcx = false">
          <span class="icons icons-xcx"></span>
          <span class="text">小程序</span>
          <span class="qrcode-show xcx-show" v-show="showQrcodeXcx">
            <img src="@/assets/images/layouts/huangbar/xcx-qrcode.png">
            <span class="pop-text">微信扫一扫进入</br>一呼百应小程序</span>
          </span>
        </li>
        <li @mouseover="mouseKefu()" @mouseout="mouseoutKefu()">
          <span class="icons icons-serivce"></span>
          <span class="text">客服</span>
        </li>
        <li :class="visible?'totop showTop':'totop'">
          <transition :name="transitionName">
            <div @click="backToTop">
              <span class="icons icons-totop"></span>
              <span class="text">顶部</span>
            </div>
          </transition>
        </li>
      </ul>
    </div>
    <!-- <i class="el-icon-circle-close close-kefu cursor" v-show="closeKefuBtn" @click="closeKefu"></i> -->
  </div>

</template>
<script>

import { getUserCartNum } from '@/api/cart'

if(process.browser){
  require('@/utils/service')
}
export default {
  name: 'BackToTop',
  props: {
    visibilityHeight: {
      type: Number,
      default: 400
    },
    backPosition: {
      type: Number,
      default: 0
    },
    transitionName: {
      type: String,
      default: 'fade'
    },
    // upCart: {
    //   type: String,
    //   default: 0
    // }
  },
  data() {
    return {
      showQrcodeXcx: false,
      showQrcodeApp: false,
      visible: false,
      interval: null,
      isMoving: false,
      qrcodeApps: false,
      userInfo: this.getUserInfo(),
      cartNumber: 0,
      kefuEl: null,
      closeKefuBtn: false,
      timerKefu: null
    }
  },

  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    if(this.userInfo){
      this.getUserCartNum()
    }

    this.$nextTick(() => {


    })
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  methods: {
    closeKefu() {
      if(process.browser){
        document.querySelectorAll(".nb-icon-wrap")[0].style.cssText = 'display: none !important';
        this.closeKefuBtn = false
      }

    },
    mouseKefu() {
      if (process.browser) {
        clearTimeout(this.timerKefu)
        document.querySelectorAll(".nb-icon-wrap")[0].style.cssText = 'display: block !important';
        document.querySelectorAll(".nb-icon-wrap")[0].style.opacity = '1';
      }
    },
    mouseoutKefu() {
      const that = this;
      if (process.browser) {
        clearTimeout(this.timerKefu)
        this.timerKefu = setTimeout(() => {
          document.querySelectorAll(".nb-icon-wrap")[0].style.cssText = 'display: none !important';
          document.querySelectorAll(".nb-icon-wrap")[0].style.opacity = '0';
        }, 100);

        document.querySelectorAll(".nb-icon-wrap")[0].onmouseover = function() {

          clearTimeout(that.timerKefu)
          this.style.cssText = 'display: block !important';
          this.style.opacity = '1';
        }
        document.querySelectorAll(".nb-icon-wrap")[0].onmouseout = function() {
          clearTimeout(that.timerKefu)
          this.style.cssText = 'display: none !important';
          this.style.opacity = '0';
        }
      }



    },
    // 获取用户购物车数量
    getUserCartNum() {
      getUserCartNum().then(res=>{
        if(res.data > 99){
          this.cartNumber = '99+';
        }else{
          this.cartNumber = res.data;
        }

      })
    },
    handleScroll() {
      this.visible = window.pageYOffset > this.visibilityHeight
    },
    backToTop() {
      if (this.isMoving) return
      const start = window.pageYOffset
      let i = 0
      this.isMoving = true
      this.interval = setInterval(() => {
        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
        if (next <= this.backPosition) {
          window.scrollTo(0, this.backPosition)
          clearInterval(this.interval)
          this.isMoving = false
        } else {
          window.scrollTo(0, next)
        }
        i++
      }, 16.7)
    },
    easeInOutQuad(t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t + b
      return -c / 2 * (--t * (t - 2) - 1) + b
    }
  }
}
</script>

<style scoped lang="scss">
#huangbar{
  background-color: #F9F9F9;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 48px;
  z-index: 99;
  text-align: center;
  border-left: 1px solid #EEEEEE;

  .huangbar-wrap{
    position: relative;
    height: 100%;
    width: 100%;
    .cart{
      position: absolute;
      bottom: 500px;
      height: 100px;
      left: 0;
      width: 100%;
      .cart-main{
        border-top: 1px solid #EEEEEE;
        padding-top: 20px;
        margin-top: 20px;
        font-size: 12px;
      }
      .icons-user{
        display: block;
        margin: 0 auto;
        margin-bottom: 10px;
      }
      .avatar{
        width: 26px;
        height: 26px;
        img{
          max-width: 100%;
        }
      }
      .icons-cart{
        display: block;
        margin: 0 auto;
        margin-bottom: 10px;
      }
      .text{
        line-height: 20px;
      }
      .cart-number{
        background-color: #255B8A;
        text-align: center;
        color: #fff;
        width: 23px;
        height: 23px;
        line-height: 23px;
        border-radius: 60px;
        margin: 0 auto;
        font-size: 12px;
        margin-top: 15px;
      }
    }
    .icons-user{
      background-image: url('../../assets/images/layouts/huangbar/user.png');
      width: 16px;
    }
    .icons-cart{
      background-image: url('../../assets/images/layouts/huangbar/cart.png');
    }
    .navs{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      li{
        padding: 20px 0;
        border-top: 1px solid #EEEEEE;
        font-size: 12px;
        position: relative;
        cursor: pointer;
        .icons{
          display: block;
          margin: 0 auto;
          margin-bottom: 9px;
        }
        .text{
          display: block;
          text-align: center;
          width: 100%;
          color: #333333;
        }
        .icons-serivce{
          background-image: url('../../assets/images/layouts/huangbar/service.png');
        }
        .icons-apps{
          background-image: url('../../assets/images/layouts/huangbar/app.png');
          width: 14px;
        }
        .icons-xcx{
          background-image: url('../../assets/images/layouts/huangbar/xcx.png');
        }
        .icons-totop{
          background-image: url('../../assets/images/layouts/huangbar/top.png');
        }
        .qrcode-show{
          position: absolute;
          left: -140px;
          top: -35px;
          opacity: 0;
          transition: all .3s;
          background-color: #fff;
          padding: 10px;
          border-radius: 10px;
          .pop-text{
            display: block;
          }
        }
      }
      li:nth-child(1){
        border-top: none;
      }
      li:hover,li.active{

        .qrcode-show{
          opacity: 1;
          left: -130px;

        }
        .icons-serivce{
          background-image: url('../../assets/images/layouts/huangbar/service-active.png');
        }
        .icons-apps{
          background-image: url('../../assets/images/layouts/huangbar/app-active.png');
        }
        .icons-xcx{
          background-image: url('../../assets/images/layouts/huangbar/xcx-active.png');
        }
        .icons-totop{
          background-image: url('../../assets/images/layouts/huangbar/top-active.png');
        }
        .text{
          color: #255B8A
        }
      }
      .totop{
        height: 0;
        padding: 0;
        transition: all 0.3s
      }
      .totop.showTop{
        height: 44px;
        padding: 20px 0;
      }
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

.back-to-ceiling .Icon {
  fill: #9aaabf;
  background: none;
}
.close-kefu{
  position: fixed;
  right: 50px;
  bottom: 67px;
  font-size: 20px;
  z-index: 9;
  color: #999;
}

</style>
<style lang="scss">
#newBridge .icon-right-center{
  top: auto !important;
  bottom: 20px !important;
  right: 50px !important;
  opacity: 0;
}
.nb-icon-wrap{
  display: none !important;
}
</style>
